<template >
    <div >
         <!-- 头部 -->
     <div class="w-header">
      <div class="w-xhead">
        <!-- logo -->
       <img class="c-logo" src="../../assets/user/阿拉灯.png" alt="">
       <!-- 搜索 -->
       <input class="c-ipt" type="text" >
       <img class="c-sousuo" src="../../assets/user/sousuo.png" alt="">
       <div class="c-sousuotxt">输入商品关键词</div>
       <img class="c-xinxi" src="../../assets/user/xinxi.png" alt=""> 
      </div>
    </div>
<!-- 导航 -->
        <ul class="c-me" >
            <li @click="click(index)" class="c-op" v-for="(item,index) in list" :key="item.id" >
               <div :class="{'c-bor':arr[index]}">{{item.name}}</div> 
                </li></ul>
    <!-- 大图 -->
        <div>
            <img class="c-mbhl" src="../../assets/user/mianbuhuli.png" alt="">
        </div>
    <!-- 商品分区 -->
      <div class="c-sp-box">
      <ul class="c-flex">
        <li  class="c-style" @click="facia" v-for="(item,index) in shop" :key="index"><img :src="item.src" alt=""><div class="c-comt">{{item.name}}</div></li>
      </ul>
      <ul class="c-flex">
        <li class="c-style" @click="facia"  v-for="(item,index) in shop" :key="index"><img :src="item.src" alt=""><div class="c-comt">{{item.name}}</div></li>
      </ul>
      <ul class="c-flex">
        <li class="c-style" @click="facia"  v-for="(item,index) in shop" :key="index"><img :src="item.src" alt=""><div class="c-comt">{{item.name}}</div></li>
      </ul><ul class="c-flex">
        <li class="c-style" @click="facia"  v-for="(item,index) in shop" :key="index"><img :src="item.src" alt=""><div class="c-comt">{{item.name}}</div></li>
      </ul>
    </div>
     <!-- 底部 -->
     <foots></foots>
    
    </div>
</template>
<script>
import footer from '../../components/ma/footer';

export default {
    name:'Category',
    data(){
        return{
            list:[
                {id:1,name:'为您推荐'},
                {id:2,name:'面部护理'},
                {id:3,name:'底妆彩妆'},
                {id:4,name:'休闲零食'},
                {id:5,name:'身体护理'},
                {id:6,name:'美容美发'},
                {id:7,name:'生活用品'},
                {id:8,name:'个人护理'},
                {id:9,name:'保健养生'},
                {id:10,name:'时尚潮品'},
                {id:11,name:'母婴用品'}
            ],
            arr:[false,false,false,false,false,false,false,false,false,false,false],
            shop:[
                {id:1,name:'洁面护理',src:require('../../assets/user/宽套装.png')},
                {id:2,name:'人气口红',src:require('../../assets/user/宽口红.png')},
                {id:3,name:'名牌包包',src:require('../../assets/user/宽包.png')},
            ]
      }
    },
     components:{
      'foots':footer
    },
    methods:{
     click(c){
        for(var i=0;i<this.arr.length;i++){
            this.arr[i] = false;
        }
         this.$set(this.arr,c,true);
        console.log(c);
        if(c==0){
           this.$router.replace('/class');
        }else if(c==1){
          this.$router.replace('/category');
        }
        this.$set(this.arr,c,true);
         },
         facia:function(){
           this.$router.replace('/facialcare')
         }
}
     }
</script>

<style scoped>
     /* 顶部 */
  .w-header{
  background-color: #e53e42;
  width: 100%;
  height: 9.6rem;
  color: #fff;
  font-size: 3.6rem;
  position: fixed;
  top: 0;
  left: 0;
}
.w-xhead{
  height:9.6rem;
  line-height:9.6rem;
}
.c-logo{
  height: 3.4rem;
  margin-left:2.3rem ;
  vertical-align: middle;
}
.c-xinxi{
 height: 3.8rem;
 padding-left:6.8rem ;
 vertical-align: middle;
}
.c-ipt{
height: 4.8rem;
width: 40rem;
display:inline-block;
margin-left:6.7rem ;
font-size: 2.4rem;
vertical-align: middle;
border-radius:  1rem;
border: none;
}
.c-sousuo{
  width: 2.8rem;
  height: 3rem;
  position: fixed;
  top: 3.8rem;
  left: 24.4rem;
}
.c-sousuotxt{
  font-size: 2.4rem;
  color: #e83d41;
  position: fixed;
  top: 0.5rem;
  left: 27.6rem;
}
/* 导航 */
.c-me{
width: 18rem;
margin-top:9.6rem;
border-right: 0.1rem #cccccc solid;
}
.c-op{
    height: 8rem;
    font-size: 3rem;
    line-height: 8rem;
    text-align: center;
    color: #4d4d4d;
    border-bottom:0.1rem #cccccc solid
}
.c-bor{
     height: 8rem;
    line-height: 8rem;
    color: #e53e42;
    border-right:0.1rem #f00 solid ;
}
.c-mbhl{
    width: 50rem;
    height: 20rem;
    position: absolute;
    top:11.3rem;
    right: 2rem;
}
/* 商品 */
.c-sp-box{
  display: inline-block;
  width: 50rem;
  margin-left: 2rem;
  /* border: 1px #00f solid;  */
  position: absolute;
  top: 35.6rem;
  left: 20rem;
} 
.c-com{
height: 10rem;
}
.c-comt{
font-size: 2.4rem;
line-height:2.4rem;
color: 666666;
margin-top: 2rem;
text-align: center;
}
.c-style{
width: 16.5rem;
height: 18rem;
}
.c-flex {
  margin-top:2rem;
  display: flex;
  justify-content: space-around;
  list-style: none;
}

/* 底部 */
.w-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 9.6rem;
  border-top: 0.1rem #ccc solid;
}
.w-xfoot{
  border-top: 0.1rem solid #e6e6e6;
  height: 9.6rem;
}
.w-xfoot ul{
  display: flex;
  height: 9.6rem;
}
.w-xfoot ul li{
  flex: 1;
  font-size:2rem;
  color: #666;
  text-align: center;
}
.w-xfoot ul li.w-red{
  color: #e83d41;
}
.w-xfoot ul li{
  position: relative;
  overflow: hidden;
}
.w-xfoot ul li span{
  display: inline-block;
  width: 100%;
  margin-top:-0.8rem ;
}
.w-xfoot ul li i{
  margin-top: 1.2rem;
  display: inline-block;
  height: 5rem;
  width: 5rem;
  /* outline: 0.1rem solid #00f; */
}
.w-xfoot ul li:nth-child(1) i{
  background: url(../../assets/user/bottom1.png) no-repeat 0.1rem 0;
}
.w-xfoot ul li:nth-child(2) i{
  background: url(../../assets/user/bottom2.png) no-repeat -5.5rem 0;
}
.w-xfoot ul li:nth-child(3) em{
  margin-top: 1.5rem;
  display: inline-block;
  height: 5.5rem;
  width: 11.3rem;
  background: url(../../assets/user/bottom3.png) no-repeat 0 0;
}
.w-xfoot ul li:nth-child(4) i{
  margin-left: -0.8rem;
  background: url(../../assets/user/bottom4.png) no-repeat -5.4rem 0;
}
.w-xfoot ul li:nth-child(5) i{
  background: url(../../assets/user/bottom5.png) no-repeat -5.8rem 0;
}
</style>